import 'package:flutter/material.dart';
import 'package:flutterdemo/common/calc.dart';
import 'package:flutterdemo/components/avatar.dart';
import 'package:flutterdemo/components/button.dart';
import 'package:flutterdemo/components/my_appbar.dart';

class Member extends StatefulWidget {
  Member({Key? key}) : super(key: key);

  @override
  _MemberState createState() => _MemberState();
}

class _MemberState extends State<Member> {
  int memberIndex = 0;

  // 头部内容
  Widget _header() {
    return Stack(
      children: [
        Container(
          width: double.infinity,
          child: Image.asset(
            "static/images/vipCenter_bg.png",
            fit: BoxFit.fill,
          ),
        ),
        Container(
            padding: EdgeInsetsDirectional.all(Calc.width(30)),
            margin: EdgeInsets.fromLTRB(
                Calc.width(30), Calc.width(160), Calc.width(30), 0),
            width: double.infinity,
            height: Calc.width(374),
            decoration: BoxDecoration(
                image: DecorationImage(
              image: AssetImage("static/images/vipCart.png"),
              fit: BoxFit.cover,
            )),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  children: [
                    Avatar(
                      "https://img1.baidu.com/it/u=1316800099,2051258115&fm=26&fmt=auto",
                      size: Calc.width(140),
                    ),
                    SizedBox(
                      width: Calc.width(20),
                    ),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          "成龙de谜语",
                          style: TextStyle(color: Colors.white, fontSize: 20),
                        ),
                        SizedBox(
                          height: Calc.width(10),
                        ),
                        Text(
                          "超级会员至：2022-02-04",
                          style: TextStyle(color: Colors.white),
                        ),
                      ],
                    )
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      children: [
                        Text(
                          "享38项专属特权",
                          style: TextStyle(color: Colors.white),
                        ),
                        SizedBox(
                          width: Calc.width(10),
                        ),
                        Icon(
                          Icons.wallet_membership,
                          color: Colors.yellow[400],
                        ),
                      ],
                    ),
                    MyButton(
                      "立即开通",
                      onPressed: () {
                        _memberPW();
                      },
                    ),
                  ],
                )
              ],
            )),
      ],
    );
  }

  // 会员购买弹窗
  _memberPW() {
    showModalBottomSheet(
        context: context,
        backgroundColor: Colors.transparent,
        builder: (BuildContext context) {
          return StatefulBuilder(builder: (ctx, state) {
            return Ink(
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(Calc.width(20)),
                      topRight: Radius.circular(Calc.width(20)))),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Padding(
                    padding: EdgeInsets.all(10),
                    child: Text(
                      "开通超级会员",
                      style: TextStyle(fontSize: 20),
                    ),
                  ),
                  SizedBox(
                    height: Calc.width(40),
                  ),
                  Container(
                    width: double.infinity,
                    height: Calc.width(400),
                    child: ListView(
                      padding: EdgeInsets.fromLTRB(
                          Calc.width(30), 0, Calc.width(30), 0),
                      physics: BouncingScrollPhysics(),
                      scrollDirection: Axis.horizontal,
                      children: [
                        _memberPItemW("1个月", 0, onTab: () {
                          state(() {
                            memberIndex = 0;
                          });
                        }),
                        SizedBox(
                          width: Calc.width(20),
                        ),
                        _memberPItemW("3个月", 1, onTab: () {
                          state(() {
                            memberIndex = 1;
                          });
                        }),
                        SizedBox(width: Calc.width(20)),
                        _memberPItemW("6个月", 2, onTab: () {
                          state(() {
                            memberIndex = 2;
                          });
                        }),
                        SizedBox(width: Calc.width(20)),
                        _memberPItemW("12个月", 3, onTab: () {
                          state(() {
                            memberIndex = 3;
                          });
                        }),
                      ],
                    ),
                  ),
                  SizedBox(
                    height: Calc.width(40),
                  ),
                  MyButton(
                    "立即开通",
                    width: Calc.width(500),
                    onPressed: () {
                      Navigator.pop(context);
                    },
                  ),
                  SizedBox(
                    height: Calc.width(50),
                  )
                ],
              ),
            );
          });
        });
  }

  // 弹窗里的选择时间每一项
  Widget _memberPItemW(String name, int index, {onTab}) {
    return Ink(
      // padding: EdgeInsets.fromLTRB(Calc.width(20), Calc.width(20), Calc.width(20), Calc.width(40)),
      width: Calc.width(300),
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(Calc.width(20)),
          boxShadow: [
            BoxShadow(
                color: index == memberIndex
                    ? Color.fromRGBO(255, 172, 18, 0.5)
                    : Color.fromRGBO(0, 0, 0, 0.1),
                blurRadius: 3,
                spreadRadius: 1.0)
          ]),
      child: InkWell(
        onTap: onTab,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            SizedBox(
              height: Calc.width(10),
            ),
            Text(
              name,
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700),
            ),
            SizedBox(
              height: Calc.width(10),
            ),
            Text(
              "￥39.00",
              style: TextStyle(color: Colors.red, fontSize: 21),
            ),
            Text(
              "原价￥78.00",
              style: TextStyle(
                  color: Colors.grey, decoration: TextDecoration.lineThrough),
            ),
            Container(
              padding: EdgeInsets.fromLTRB(
                  Calc.width(10), Calc.width(4), Calc.width(10), Calc.width(4)),
              decoration: BoxDecoration(
                  color: Color.fromRGBO(233, 233, 233, 1),
                  borderRadius: BorderRadius.circular(Calc.width(4))),
              child: Text("折合￥26/月"),
            ),
            SizedBox(
              height: Calc.width(10),
            ),
          ],
        ),
      ),
    );
  }

  // 权益部分
  Widget _rightsAndInterests() {
    return Container(
      padding: EdgeInsetsDirectional.all(Calc.width(30)),
      child: Column(
        children: [
          Text(
            "专属特权",
            style: TextStyle(fontSize: 18),
          ),
          SizedBox(
            height: Calc.width(20),
          ),
          Container(
            padding:
                EdgeInsets.only(top: Calc.width(15), bottom: Calc.width(15)),
            width: double.infinity,
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(Calc.width(20))),
            child: Wrap(
              children: [
                _rightsAndInterestsIconItem("超级会员日", Icons.accessible_forward),
                _rightsAndInterestsIconItem("打卡积分", Icons.card_membership),
                _rightsAndInterestsIconItem("百元券", Icons.baby_changing_station),
                _rightsAndInterestsIconItem("0元听课", Icons.dangerous),
                _rightsAndInterestsIconItem("听课积分", Icons.safety_divider),
                _rightsAndInterestsIconItem("全场包邮", Icons.email),
                _rightsAndInterestsIconItem("专属客服", Icons.face),
                _rightsAndInterestsIconItem("邀请奖励", Icons.format_align_justify),
                _rightsAndInterestsIconItem("生日福利", Icons.padding),
                _rightsAndInterestsIconItem("商城积分", Icons.qr_code),
              ],
            ),
          )
        ],
      ),
    );
  }

  Widget _rightsAndInterestsIconItem(String name, IconData icon) {
    return Container(
        margin: EdgeInsetsDirectional.only(
            bottom: Calc.width(15), top: Calc.width(15)),
        width: Calc.width(172.5),
        child: Column(
          children: [
            Icon(
              icon,
              color: Colors.orange,
              size: 30,
            ),
            SizedBox(
              height: Calc.width(5),
            ),
            Text(
              name,
              style: TextStyle(fontSize: 13),
            ),
          ],
        ));
  }

  @override
  Widget build(BuildContext context) {
    Calc.init(context);
    return Scaffold(
      backgroundColor: Color.fromRGBO(233, 233, 233, 1),
      appBar: MyAppBar().getAppBar("会员中心"),
      body: ListView(
          physics: BouncingScrollPhysics(),
          children: [_header(), _rightsAndInterests()]),
    );
  }

  void setBottomSheetState(Null Function() param0) {}
}
